<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <header class="header" :class="{ 'shadow-md': isHeaderShadow }">
      <div class="header-content">
        <div class="header-left">
          <text class="header-title">周边设备</text>
        </div>
        <div class="header-right">
          <view class="header-icon-btn" @click="locate">
            <i class="fas fa-location-arrow"></i>
          </view>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 设备统计信息 -->
      <view class="stats-section">
        <view class="stats-card">
          <view class="stats-content">
            <text class="stats-text">
              <i class="fas fa-map-marker-alt text-primary mr-2"></i>
              <text class="stats-label">当前区域：</text>
              <text class="stats-location">{{ currentLocation }}</text>
            </text>
            <text class="stats-count">
              共 <text class="stats-number">{{ totalDevices }}</text> 台设备
            </text>
          </view>
        </view>
      </view>



      <!-- 设备列表标题 -->
      <view class="list-header">
        <text class="list-title">附近设备</text>
        <view class="filter-tabs">
          <view 
            v-for="(tab, index) in filterTabs" 
            :key="index" 
            class="filter-tab"
            :class="{ active: activeTab === index }"
            @click="switchTab(index)"
          >
            {{ tab.name }}
          </view>
        </view>
      </view>

      <!-- 设备列表 -->
      <view class="devices-list">
        <view 
          v-for="(device, index) in filteredDevices" 
          :key="index" 
          class="device-item"
          @click="goToDeviceMap(device.id)"
        >
          <view class="device-content">
            <view class="device-icon">
              <view class="bucket-container">
                <view class="bucket-body">
                  <view 
                    class="bucket-fill" 
                    :style="'height: ' + getFillLevel(device) + '%; background-color: ' + getBucketColor(device.currentWeight) + ';'"
                  ></view>
                </view>
                <view class="bucket-handle-left"></view>
                <view class="bucket-handle-right"></view>
              </view>
            </view>
            <view class="device-info">
              <view class="device-header">
                <text class="device-name">{{ device.name }}</text>
                <view class="device-status" :class="'status-' + device.status">
                  {{ device.statusText }}
                </view>
              </view>
              <view class="device-details">
                <text class="device-id">设备编号: {{ device.id }}</text>
                <text class="device-distance">{{ device.distance }}</text>
              </view>
              <view class="device-location">
                <text class="location-text">
                  <i class="fas fa-map-marker-alt mr-1"></i>
                  {{ device.location }}
                </text>
                <view class="navigate-btn" :class="{ disabled: device.status === 'full' }" @click="navigate(device)">
                  <text>导航</text>
                  <i class="fas fa-arrow-right ml-1"></i>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredDevices.length === 0">
        <view class="empty-icon">
          <i class="fas fa-map-marker-alt"></i>
        </view>
        <text class="empty-text">附近暂无回收设备</text>
        <text class="empty-subtext">请尝试调整筛选条件</text>
      </view>

      <!-- 加载状态 -->
      <view class="loading-state" v-if="loading">
        <view class="loading-spinner"></view>
        <text class="loading-text">加载中...</text>
      </view>
    </main>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 当前位置
      currentLocation: '定位中...',
      // 设备总数
      totalDevices: 12,

      // 筛选标签
      filterTabs: [
        { name: '全部', type: 'all' },
        { name: '纸壳类', type: 'paper' },
        { name: '混合类', type: 'mixed' },
        { name: '织物类', type: 'textile' }
      ],
      // 当前激活的标签
      activeTab: 0,
      // 设备列表数据
      devices: [
        {
          id: 'ZL-20230512',
          name: '纸壳类回收箱',
          type: 'paper',
          icon: 'fa-box',
          status: 'available',
          statusText: '可使用',
          distance: '500m',
          location: '科技园区A座楼下',
          currentWeight: 12.5,
          maxWeight: 50
        },
        {
          id: 'HH-20230428',
          name: '混合类回收箱',
          type: 'mixed',
          icon: 'fa-recycle',
          status: 'warning',
          statusText: '即将满',
          distance: '850m',
          location: '中央广场西北角',
          currentWeight: 42.5,
          maxWeight: 50
        },
        {
          id: 'ZW-20230315',
          name: '织物类回收箱',
          type: 'textile',
          icon: 'fa-tshirt',
          status: 'full',
          statusText: '已满',
          distance: '1.2km',
          location: '幸福小区3号门旁',
          currentWeight: 50,
          maxWeight: 50
        },
        {
          id: 'ZL-20230602',
          name: '纸壳类回收箱',
          type: 'paper',
          icon: 'fa-box',
          status: 'available',
          statusText: '可使用',
          distance: '1.5km',
          location: '商业中心B区停车场',
          currentWeight: 20,
          maxWeight: 50
        },
        {
          id: 'HH-20230520',
          name: '混合类回收箱',
          type: 'mixed',
          icon: 'fa-recycle',
          status: 'available',
          statusText: '可使用',
          distance: '2.1km',
          location: '文化公园南门入口',
          currentWeight: 7.5,
          maxWeight: 50
        }
      ],
      // 加载状态
      loading: false
    };
  },
  computed: {
    // 过滤后的设备列表
    filteredDevices() {
      const activeFilter = this.filterTabs[this.activeTab].type;
      if (activeFilter === 'all') {
        return this.devices;
      }
      return this.devices.filter(device => device.type === activeFilter);
    }
  },
  onLoad() {
    // 页面加载时初始化
    this.initLocation();
  },
  data() {
    return {
      // 当前位置
      currentLocation: '定位中...',
      // 设备总数
      totalDevices: 12,
      // 地图标记点
      mapMarkers: [
        { top: '30%', left: '40%', status: 'available' },
        { top: '45%', left: '60%', status: 'warning' },
        { top: '60%', left: '30%', status: 'full' },
        { top: '25%', left: '70%', status: 'available' },
        { top: '55%', left: '80%', status: 'warning' }
      ],
      // 筛选标签
      filterTabs: [
        { name: '全部', type: 'all' },
        { name: '纸壳类', type: 'paper' },
        { name: '混合类', type: 'mixed' },
        { name: '织物类', type: 'textile' }
      ],
      // 当前激活的标签
      activeTab: 0,
      // 设备列表数据
      devices: [
        {
          id: 'ZL-20230512',
          name: '纸壳类回收箱',
          type: 'paper',
          icon: 'fa-box',
          status: 'available',
          statusText: '可使用',
          distance: '500m',
          location: '科技园区A座楼下'
        },
        {
          id: 'HH-20230428',
          name: '混合类回收箱',
          type: 'mixed',
          icon: 'fa-recycle',
          status: 'warning',
          statusText: '即将满',
          distance: '850m',
          location: '中央广场西北角'
        },
        {
          id: 'ZW-20230315',
          name: '织物类回收箱',
          type: 'textile',
          icon: 'fa-tshirt',
          status: 'full',
          statusText: '已满',
          distance: '1.2km',
          location: '幸福小区3号门旁'
        },
        {
          id: 'ZL-20230602',
          name: '纸壳类回收箱',
          type: 'paper',
          icon: 'fa-box',
          status: 'available',
          statusText: '可使用',
          distance: '1.5km',
          location: '商业中心B区停车场'
        },
        {
          id: 'HH-20230520',
          name: '混合类回收箱',
          type: 'mixed',
          icon: 'fa-recycle',
          status: 'available',
          statusText: '可使用',
          distance: '2.1km',
          location: '文化公园南门入口'
        }
      ],
      // 加载状态
      loading: false,
      // 导航栏阴影状态
      isHeaderShadow: false
    };
  },
  onPageScroll(e) {
    // 导航栏滚动效果 - 使用UniApp兼容的方式
    this.isHeaderShadow = e.scrollTop > 10;
  },
  methods: {
    // 获取桶装图标填充颜色（根据重量）
    getBucketColor(currentWeight) {
      if (currentWeight >= 50) {
        return '#f53f3f'; // 红色 - 满载
      } else {
        return '#52c41a'; // 绿色 - 未满
      }
    },
    
    // 获取填充高度百分比
    getFillLevel(device) {
      return Math.round((device.currentWeight / device.maxWeight) * 100);
    },
    
    // 初始化定位
    initLocation() {
      this.loading = true;
      // 模拟定位功能
      setTimeout(() => {
        this.currentLocation = '科技园区';
        this.loading = false;
        this.showToast('定位成功');
      }, 1500);
    },

    // 重新定位
    locate() {
      this.loading = true;
      this.currentLocation = '定位中...';
      // 模拟定位功能
      setTimeout(() => {
        this.currentLocation = '科技园区';
        this.loading = false;
        this.showToast('定位成功');
      }, 1500);
    },

    // 切换标签
    switchTab(index) {
      this.activeTab = index;
    },

    // 导航到设备
    navigate(device) {
      if (device.status === 'full') {
        uni.showToast({
          title: '该设备已满，无法使用',
          icon: 'none'
        });
        return;
      }
      uni.showModal({
        title: '导航',
        content: `是否导航至${device.name}？`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '导航功能开发中',
              icon: 'none'
            });
          }
        }
      });
    },
    // 显示提示消息
    showToast(message) {
      uni.showToast({
        title: message,
        icon: 'none',
        duration: 2000
      });
    },

    // 跳转到设备地图页面
    goToDeviceMap(deviceId) {
      uni.navigateTo({
        url: `/pages/devices/map?deviceId=${deviceId}`
      });
    }
  }
};
</script>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 颜色变量 */
:root {
  --primary: #165DFF;
  --secondary: #36CBCB;
  --success: #00B42A;
  --warning: #FF7D00;
  --danger: #F53F3F;
  --info: #86909C;
  --light: #F2F3F5;
  --dark: #1D2129;
  --blue-100: #E8F3FF;
  --blue-200: #B4D7FF;
  --blue-300: #80BFFF;
  --blue-400: #4CA3FF;
  --blue-500: #1687FF;
  --blue-600: #0E66D9;
  --blue-700: #0A49A7;
  --blue-800: #062C7F;
  --blue-900: #031333;
}

.container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(to bottom, #e5f7e9, #eaf1ee);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--dark);
}

/* 顶部导航栏 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 50;
  transition: all 0.3s ease;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.header-left {
  display: flex;
  align-items: center;
}



.header-title {
  font-size: 20px;
  font-weight: bold;
  color: var(--dark);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--blue-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 16px;
  transition: all 0.3s ease;
}

.header-icon-btn:active {
  transform: scale(0.95);
}

/* 主内容区域 */
.main-content {
  padding-top: 80px;
  padding-bottom: 100px;
  padding-left: 16px;
  padding-right: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 统计信息 */
.stats-section {
  margin-bottom: 16px;
}

.stats-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.stats-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stats-text {
  font-size: 14px;
  color: var(--dark);
}

.stats-label {
  font-weight: 500;
  margin-right: 4px;
}

.stats-location {
  color: var(--info);
}

.stats-count {
  font-size: 14px;
  font-weight: 500;
  color: var(--dark);
}

.stats-number {
  color: var(--primary);
  font-weight: bold;
}



/* 列表标题 */
.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.list-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--dark);
}

.filter-tabs {
  display: flex;
  gap: 8px;
}

.filter-tab {
  padding: 4px 12px;
  border-radius: 20px;
  background-color: var(--light);
  color: var(--info);
  font-size: 12px;
  transition: all 0.3s ease;
}

.filter-tab.active {
  background-color: var(--primary);
  color: #fff;
}

.filter-tab:active {
  transform: scale(0.95);
}

/* 设备列表 */
.devices-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.device-item {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}

.device-item:active {
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
}

.device-content {
  display: flex;
  padding: 16px;
}

.device-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
}

/* 桶装图标样式 */
.bucket-container {
  position: relative;
  width: 36px;
  height: 40px;
}

.bucket-body {
  position: relative;
  width: 28px;
  height: 32px;
  background-color: #f0f0f0;
  border: 2px solid #d0d0d0;
  border-radius: 0 0 4px 4px;
  overflow: hidden;
  margin: 0 auto;
}

.bucket-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: 2px;
  transition: all 0.3s ease;
  border-radius: 0 0 2px 2px;
}

.bucket-handle-left,
.bucket-handle-right {
  position: absolute;
  top: 8px;
  width: 4px;
  height: 12px;
  background-color: #d0d0d0;
  border-radius: 2px;
}

.bucket-handle-left {
  left: -2px;
}

.bucket-handle-right {
  right: -2px;
}

/* 桶口 */
.bucket-body::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -2px;
  right: -2px;
  height: 4px;
  background-color: #d0d0d0;
  border-radius: 2px 2px 0 0;
}

.device-info {
  flex: 1;
}

.device-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}

.device-name {
  font-size: 16px;
  font-weight: bold;
  color: var(--dark);
}

.device-status {
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 12px;
}

.status-available {
  background-color: #F6FFED;
  color: var(--success);
}

.status-warning {
  background-color: #FFF7E6;
  color: var(--warning);
}

.status-full {
  background-color: #FFF1F0;
  color: var(--danger);
}

.device-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.device-id {
  font-size: 14px;
  color: var(--info);
}

.device-distance {
  font-size: 14px;
  color: var(--dark);
  font-weight: 500;
}

.device-location {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.location-text {
  font-size: 14px;
  color: var(--info);
}

.navigate-btn {
  font-size: 14px;
  color: var(--primary);
  display: flex;
  align-items: center;
  font-weight: 500;
}

.navigate-btn.disabled {
  color: #ccc;
  cursor: not-allowed;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
}

.empty-icon {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--info);
  font-size: 60px;
}

.empty-text {
  font-size: 20px;
  color: #666;
  margin-bottom: 10px;
}

.empty-subtext {
  font-size: 16px;
  color: var(--info);
}

/* 加载状态 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 16px;
  color: var(--info);
}
</style>